<script setup lang="ts">
import SvgIcon from "../SvgIcon/index.vue";
import { useSettingsStore } from "../../store/modules/settings"; //默认配置
import { reactive, ref, onMounted } from "vue";
import router from "@/router";
import type { FormInstance, FormRules } from "element-plus";
import { Login } from "@/api/login.ts";
import { useAppStore } from "@/store/modules/app.ts";

const AppStore = useAppStore();
const settingsStore = useSettingsStore();
const { title, version } = settingsStore;

//表单验证规则
interface RuleForm {
  username: string; //用户名
  password: string; //密码
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "admin",
  password: "",
});

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "Please input Activity password",
      trigger: "blur",
    },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      var data: any = {
        username: "admin",
        password: ''
      }
      Login(data).then(function (res: any) {
        console.log(res.user.token);
        let token = res.user.token;
        if (token) {
          AppStore.token = token;
          router.push({ path: "/index" });
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//密码是否可见
const passwordVisible = ref(false); // 密码是否可见

onMounted(() => {
  // 主题初始化
  const theme = settingsStore.theme;
  settingsStore.changeSetting({ key: "theme", value: theme });
  if (theme == "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
});
</script>

<template>
  <div class="login_container">
    <el-card class="login-card">
      <el-tag class="version">{{ version }}</el-tag>
      <div class="title">
        <h2>{{ title }}</h2>
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form" status-icon>
        <el-form-item prop="username" class="form-item">
          <el-input v-model="ruleForm.username" prefix-icon="User" size="large" :placeholder="$t('login.username')"
            name="username" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input prefix-icon="Key" v-model="ruleForm.password" :type="passwordVisible === false ? 'password' : 'input'"
            :placeholder="$t('login.password')" size="large" name="password" class="input-with-select">
            <template #append>
              <span @click="passwordVisible = !passwordVisible">
                <svg-icon :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" class="cursor-pointer" />
              </span>
            </template>
          </el-input>
        </el-form-item>

        <!-- 登录 -->
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">{{ $t("login.login") }}
          </el-button>
        </el-form-item>
        <!-- 账号密码提示 -->
        <div class="mt-10 text-sm">
          <span class="ml-4"> 满足账号密码要求即可登录！</span>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login_container {
  width: 400px;
}

.login-card {
  padding: 20px;
  position: relative;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.version {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 15px;
  margin-right: 15px;
}

/* 表单 */
.form-item {
  display: flex;
}
</style>
